<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue2.5.15.js"></script>
</head>
<body>
<div id="app">
    <div>
        <form >
            <table>
                <tr>
                    <td>姓名：</td>
                    <td><input type="text" v-model="name"></td>
                </tr>
                <tr>
                    <td>性别：</td>
                    <td>
                        <input type="radio" id="fm"  v-model="sex" value="female">
                        <label for="fm">女</label>
                        <input type="radio" id="m" v-model="sex" value="male">
                        <label for="m">男</label>

                    </td>
                    <!--<td>性别选中的是：：{{sex}}</td>-->
                </tr>
                <tr>
                    <td>爱好：</td>
                    <td>
                        <input type="checkbox" id="music" v-model="hobby" value="music">
                        <label for="music">音乐</label>
                        <input type="checkbox" id="sport" v-model="hobby" value="sport">
                        <label for="sport">运动</label>
                        <input type="checkbox" id="game" v-model="hobby" value="game">
                        <label for="game">游戏</label>
                    </td>
                    <!--<td>爱好选中的是：：{{hobby}}</td>-->
                </tr>
                <tr>
                    <td>城市：</td>
                    <td>
                        <select v-model="city">
                            <option>北京</option>
                            <option>洛阳</option>
                            <option>上海</option>
                            <option>苏州</option>
                        </select>
                    </td>
                    <td>{{city}}</td>
                </tr>
                <tr>
                    <td>语言：</td>
                    <td>
                        <select v-model="language" multiple>
                            <option>Java</option>
                            <option>C语言</option>
                            <option>Vue.js</option>
                            <option>C#</option>
                        </select>
                    </td>
                    <td>{{language}}</td>
                </tr>

                <tr>
                    <td> <input type="button" value="提交" @click="submit"> </td>
                </tr>
            </table>
        </form>
    </div>
</div>
</body>
<script>
    const vm = new Vue(
        {
            el:"#app",
            data:{
                name:"",
                sex:"female",
                hobby:[ "music"],
                city:"北京",
                language:['Java','C#']
            },
            methods:{
                submit(){
                    console.log("需要提交的数据：：\n" +
                        "姓名：："+this.name+"\n" +
                        "性别：："+this.sex+"\n"+
                        "爱好：："+this.hobby+"\n"
                    )
                }
            }
        }
    )
</script>
</html>